<template>
  <div class="header">
    <TitleBar />
  </div>
  <div class="content">
    <div class="main">
      <action></action>
      <viewport></viewport>
    </div>
    <div class="aside">
      <tabbedPanel></tabbedPanel>
    </div>
  </div>
  <update></update>
</template>
<script setup lang="ts">
import TitleBar from './titlebar/index.vue'
import tabbedPanel from './tabbedPanel/index.vue'
import viewport from './viewport/index.vue'
import action from './action/index.vue'
import update from './update.vue'
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--header-height);
  background-color: var(--header-background);
}

.content {
  display: flex;
  height: calc(100% - var(--header-height));
  background-color: var(--main-background);

  .main {
    overflow: hidden;
    flex: 1;
    position: relative;
  }

  .aside {
    width: 350px;
    background-color: var(--aside-background);
  }
}
</style>
